<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nmon</title>
    <script src="/assets/echarts.min.js"></script>
    <script src="/assets/westeros.js"></script>
    <link rel="shortcut icon" href="/assets/nmon.ico">
    <style>
        body {
            margin: 0;
        }

        .table {
            display: flex;
            flex-direction: row;
            justify-content: center;
            flex-wrap: wrap;
            background-color: #eee;
            padding: 6px 0 8px;
            position: sticky;
            top: 0;
            z-index: 999;
        }

        .table .item {
            margin: 0 4px 0 4px;
            height: 30px;
        }

        .col {
            display: flex;
            flex-direction: row;
            justify-content: center;
            border-bottom: 1px solid #eeeeee;
        }

        .col .col-item1 {
            margin: 0 20px 2px 10px;
            width: 200px;
        }

        .col .col-item2 {
            flex-grow: 1;
        }

        #uploadForm {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .form{
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-top: 300px;
        }
        #fileNameDisplay{
            margin: 10px 0 ;
        }

        .custom-upload-input {
            visibility: hidden;
        }

        .custom-upload-label, .my-submit-button {
            border: 1px solid #ccc;
            padding: 10px;
            border-radius: 5px;
            background-color: #f9f9f9;
            cursor: pointer;
        }
    </style>
</head>
<body>

<div id="uploadForm">
    <div class="form">
        <form action="/upload" method="post" enctype="multipart/form-data">

            <label for="myFileInput" class="custom-upload-label">
                选择文件
            </label>
            <input type="file" name="file" id="myFileInput"  class="custom-upload-input"/>

            <input type="submit" class="my-submit-button" value="上传">
        </form>
        <div id="fileNameDisplay"></div>
    </div>
</div>

{{ if .Categories }}
<div class="table">
    <div class="item"><a target="_self" href="/?category=AAA"> <span>AAA</span></a></div>
    <div class="item"><a target="_self" href="/?category=BBBP"> <span>BBBP</span></a></div>
    {{ range $idx, $category := .Categories}}
    <div class="item"><a target="_self" href="/?category={{$category.UniqueID}}"> <span>{{$category.UniqueID}}</span></a></div>
    {{end}}
    <div class="item"><span> | </span></div>
    <div class="item"><a target="_blank" href="/download"><span>Download Excel</span></a></div>
    <div class="item"><span> | </span></div>
    <div class="item" style="cursor: pointer" onclick="clearCookie()"><span>Clear</span></div>
</div>
{{ end }}

{{ range $idx, $item := .AAA}}
<div class="col">
    <div class="col-item1">{{ $item.Item1}}</div>
    <div class="col-item2">{{ $item.Item2 }}</div>
</div>
{{ end }}

{{ range $idx, $item := .BBBP}}
<div class="col">
    <div class="col-item1">{{ $item.Cmd }}</div>
    <div class="col-item2">{{ $item.Output }}</div>
</div>
{{ end }}

{{ if .Chart }}
{{ .Chart }}
{{ end }}

<script>
    var cookie = "{{ .CookieFile }}"

    function clearCookie() {
        var date = new Date();
        // 将日期设置为过去的时间，比如1天前
        date.setTime(date.getTime() - (365 * 24 * 60 * 60 * 1000));
        var expires = "expires=" + date.toUTCString();
        document.cookie = cookie + "=; " + expires + "; path=/";
        location.replace('/');
    }

    function checkCookie() {
        var cookies = document.cookie;
        if (cookies.indexOf(cookie) > -1) {
            console.log("Cookie exists");
            document.getElementById("uploadForm").remove();
        } else {
            console.log("Cookie does not exist");
            document.addEventListener('DOMContentLoaded', function () {
                var fileInput = document.getElementById('myFileInput');
                var fileNameDisplay = document.getElementById('fileNameDisplay');
                fileInput.addEventListener('change', function () {
                    var file = fileInput.files[0];
                    if (file) {
                        fileNameDisplay.textContent = file.name;
                    }
                });
            });
        }
    }

    checkCookie()
</script>
</body>
</html>